<template>
    <div>
        <!-- 表格 -->
        <el-table :data="goodsList" border style="width: 100vw" :row-style="rowStyle" :header-cell-style="tableHeaderColor">
            <!-- <el-table-column type="selection" width="55"> </el-table-column> -->

            <el-table-column prop="goods_id" align="center" label="订单id" width="130">
            </el-table-column>

            <el-table-column label="订单图片" align="center" width="100">
                <template slot-scope="scope">
                    <el-popover placement="top-start" title="" trigger="hover">
                        <!-- 预览时的图片 -->
                        <img :src="scope.row.goods_small_logo" alt="" style="width: 150px; height: 150px" />
                        <!-- 真正的图片 -->
                        <img slot="reference" :src="scope.row.goods_small_logo" style="width: 60px; height: 60px" />
                    </el-popover>
                </template>
            </el-table-column>

            <el-table-column prop="goods_name" align="center" label="订单标题" width="300">
            </el-table-column>

            <el-table-column prop="goods_count" align="center" label="订单数量" width="100">
            </el-table-column>

            <el-table-column prop="goods_price" align="center" label="商品价格" width="100">
            </el-table-column>

            <el-table-column prop="goods_all" align="center" label="订单总价" width="100">
            </el-table-column>

            <el-table-column prop="goods_address" align="center" label="订单地址" width="300">
            </el-table-column>

            <el-table-column align="center" label="订单状态" width="120">
                <template slot-scope="scope">
                    <div v-if="scope.row.goods_state == 1">
                        <el-button type="success">待发货</el-button>
                    </div>
                    <div v-if="scope.row.goods_state == 2">
                        <el-button type="primary">待收货</el-button>
                    </div>
                    <div v-if="scope.row.goods_state == 3">
                        <el-button type="danger">退货/退款</el-button>
                    </div>
                </template>
            </el-table-column>

            <el-table-column align="center" label="是否发货" width="100">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.if_fahuo" @change="changefh" disabled> </el-switch>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" align="center" width="300">
                <template slot-scope="scope">
                    <div style="display: flex;">
                        <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <div style="margin: 0px 15px;">
                            <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info"
                                icon-color="red" title="你确定要删除此订单嘛？" @confirm="handleDelete(scope.$index, scope.row)">
                                <el-button slot="reference" type="danger">删除</el-button>
                            </el-popconfirm>
                        </div>
                        <div v-if="scope.row.goods_if == 1">
                            <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info"
                                icon-color="red" title="你确定要把此订单状态变为退货/退款？" @confirm="changestate(scope.$index, scope.row)">
                                <el-button slot="reference" type="danger">退货/退款</el-button>
                            </el-popconfirm>
                        </div>
                    </div>
                    <!-- <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">退货/退款</el-button> -->
                </template>
            </el-table-column>
        </el-table>

        <!-- 弹窗组件 -->
        <goodstan ref="tan" title="编辑订单"> </goodstan>
    </div>
</template>

<script>
import goodstan from "../../cpmponent/dingdan_tan.vue";
export default {
    data() {
        return {
            iid: ''
        };
    },
    components: {
        goodstan
    },
    props: {
        goodsList: []
    },
    methods: {
        // 修改发货状态
        changefh(value) {
            if (value) {
                this.$message.success("发货成功");
            } else {
                this.$message.error("取消发货");
            }
        },
        changestate(index, row) {
            this.iid = row.goods_id;
            this.updateordrtListstate()
        },
        // 修改订单状态为退货退款
        async updateordrtListstate() {
            let res = await this.$axios.post(this.$IP + "/updateordrtListstate", {
                goods_state: '3',
                goods_id: this.iid,
            })
            this.$message.success('修改订单状态为退货/退款成功!')
            this.$emit('gengxin')
        },

        // 删除开始
        handleDelete(index, row) {
            this.iid = row.goods_id;
            this.suredelete()
        },
        // 确认删除弹窗进行回调
        async suredelete() {
            let res = await this.$axios.post(this.$IP + "/deleteorderList", {
                goods_id: this.iid,
            })
            this.$message.success('删除成功')
            this.$emit('gengxin')

        },
        // 编辑开始
        handleEdit(index, row) {
            console.log(index, row);
            this.$refs.tan.open(row)
        },
        //设置表格行的样式
        rowStyle({ row, rowIndex }) {
            let styleJson1 = {
                "text-align": "center",
            };
            return styleJson1;
        },
        //设置表头行的样式
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            let styleJson = {
                "text-align": "center",
            };
            return styleJson;
        },
    }
};
</script>

<style></style>
